<template>
    <div class="bD">
        <div class="left">
            <el-form :inline="true" :model="DetailList" width="100" disabled="true">
                <div class="one">
                    <div class="header">
                        <p>客户资料/{{ DetailList.name }}</p>
                    </div>
                    <div class="con">
                        <div class="item">
                            <h4>客户姓名</h4>
                            <el-form-item>
                                <el-input v-model="DetailList.name" clearable placeholder="请输入客户姓名" />
                            </el-form-item>
                        </div>
                        <div class="item">
                            <h4>手机号码</h4>
                            <el-form-item>
                                <el-input v-model="DetailList.phone" clearable placeholder="请输入手机号码" />
                            </el-form-item>
                        </div>
                        <div class="item">
                            <h4>职业</h4>
                            <el-form-item>
                                <el-select v-model="DetailList.occupation" clearable placeholder="请选择职业">
                                    <el-option v-for="item in occupationOption" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="con">
                        <div class="item">
                            <h4>学历</h4>
                            <el-form-item>
                                <el-select v-model="DetailList.education" clearable placeholder="请选择学历">
                                    <el-option v-for="item in educationOption" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="item">
                            <h4>所在地区</h4>
                            <el-form-item>
                                <el-input v-model="DetailList.area" clearable placeholder="请输入所在地区" />
                            </el-form-item>
                        </div>
                        <div class="item">
                            <h4>微信号码</h4>
                            <el-form-item>
                                <el-input v-model="DetailList.weixin" clearable placeholder="请输入微信号码" />
                            </el-form-item>
                        </div>
                    </div>
                    <div class="con">
                        <div class="item">
                            <h4>年龄</h4>
                            <el-form-item>
                                <el-input-number v-model="DetailList.age" clearable placeholder="请输入年龄" />
                            </el-form-item>
                        </div>
                        <div class="item">
                            <h4>QQ</h4>
                            <el-form-item>
                                <el-input v-model="DetailList.qq" clearable placeholder="请输入QQ号码" />
                            </el-form-item>
                        </div>
                        <div class="item">
                            <h4>性别</h4>
                            <el-form-item>
                                <el-select v-model="DetailList.gender" clearable placeholder="请选择性别">
                                    <el-option v-for="item in genderOption" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="con">
                        <div class="item">
                            <h4>身高</h4>
                            <el-form-item>
                                <el-input-number v-model="DetailList.height" clearable placeholder="请输入身高" />
                            </el-form-item>
                        </div>
                        <div class="item">
                            <h4>体重</h4>
                            <el-form-item>
                                <el-input-number v-model="DetailList.weight" clearable placeholder="请输入体重" />
                            </el-form-item>
                        </div>
                        <div class="item">
                            <h4>备注</h4>
                            <el-form-item>
                                <el-input v-model="DetailList.remark" clearable placeholder="请输入备注" />
                            </el-form-item>
                        </div>
                    </div>
                </div>
                <div class="one">
                    <div class="header">
                        <p>客户意向</p>
                    </div>
                    <div class="con">
                        <div class="item">
                            <h4>意向类型</h4>
                            <el-form-item>
                                <el-select v-model="DetailList.courseId" clearable placeholder="请选择课程分类"
                                    @click="getClassList">
                                    <el-option v-for="item in courseIdOption" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="item">
                            <h4>意向课程</h4>
                            <el-form-item>
                                <el-select v-model="DetailList.courseId" clearable placeholder="请选择课程分类"
                                    @click="getBusinessList">
                                    <el-option v-for="item in BusinessOption" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="item">
                            <h4>健身原因</h4>
                            <el-form-item>
                                <el-input v-model="DetailList.reason" clearable placeholder="请输入健身原因" />
                            </el-form-item>
                        </div>
                    </div>
                    <div class="con">
                        <div class="item">
                            <h4>每周健身时间</h4>
                            <el-form-item>
                                <el-input-number v-model="DetailList.hours" clearable placeholder="请输入每周健身时间" />
                            </el-form-item>
                        </div>
                        <div class="item">
                            <h4>意向金额</h4>
                            <el-form-item>
                                <el-input-number v-model="DetailList.money" clearable placeholder="请输入意向金额" />
                            </el-form-item>
                        </div>
                        <div class="item">
                            <h4>其他意向</h4>
                            <el-form-item>
                                <el-input v-model="DetailList.otherIntention" clearable placeholder="请输入其他意向" />
                            </el-form-item>
                        </div>
                    </div>
                </div>
                <div class="one">
                    <div class="header">
                        <p>沟通记录</p>
                    </div>
                    <div class="con">
                        <div class="item">
                            <h4>跟进状态</h4>
                            <el-form-item>
                                <el-select v-model="DetailList.status" clearable placeholder="请选择跟进状态">
                                    <el-option v-for="item in statusOption" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="item">
                            <h4>下次跟进时间</h4>
                            <el-form-item>
                                <el-date-picker v-model="DetailList.nextTime" type="datetime" placeholder="请选择下次跟进时间" />
                            </el-form-item>
                        </div>
                        <div class="item">
                            <h4>沟通重点</h4>
                            <el-form-item>
                                <el-select v-model="DetailList.info" clearable placeholder="请选择沟通重点">
                                    <el-option v-for="item in infoOption" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="con">
                        <div class="item_last">
                            <h4>沟通纪要</h4>
                            <el-form-item>
                                <el-input v-model="DetailList.info" clearable placeholder="请输入沟通纪要" />
                            </el-form-item>
                        </div>
                    </div>
                </div>
            </el-form>
            <div class="footer">
                <el-button @click="goBack">返回</el-button>
                <el-button type="primary" @click="goBack" disabled>保存</el-button>
                <el-button type="success" @click="goBack" disabled>转为成交客户</el-button>
            </div>
        </div>
        <div class="right">
            <div class="header">
                <p>商品跟进记录</p>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import { BusinessDetail, BusinessCourse, BusinessClass } from "../../../api/index"
import { ElMessage } from 'element-plus';
import useTagsViewStore from '@/store/modules/tagsView'
const route = useRoute();
const router = useRouter();
const businessId = route.query.id
const BusinessOption = ref([])
const courseIdOption = ref([])
const infoOption = [
    { label: '课程', value: 0 },
    { label: '商品', value: 1 },
]
const occupationOption = [
    { label: '学生', value: 0 },
    { label: '上班族', value: 1 },
    { label: '自由职业', value: 2 },
    { label: '企业主', value: 3 },
    { label: '其他', value: 4 },
]
const educationOption = [
    { label: '小学', value: 0 },
    { label: '初中', value: 1 },
    { label: '高中', value: 2 },
    { label: '本科', value: 3 },
    { label: '专科', value: 4 },
]
const statusOption = [
    { label: '待跟进', value: 0 },
    { label: '已跟进', value: 1 },
]
const genderOption = [
    { label: '男', value: 0 },
    { label: '女', value: 1 },
]
const formInline = reactive({
    user: '',
    region: '',
    date: '',
})
const DetailList = ref([])
const DetailForm = ref({
    "age": 0,
    "area": "",
    "businessId": businessId,
    "city": "",
    "courseId": "",
    "education": "",
    "gender": 0,
    "height": 0,
    "hours": 0,
    "info": "",
    "money": 0,
    "name": "",
    "nextTime": "",
    "occupation": "",
    "otherIntention": "",
    "phone": "",
    "province": "",
    "qq": "",
    "reason": "",
    "remark": "",
    "status": 0,
    "weight": 0,
    "weixin": ""
})
const goBack = () => {
    useTagsViewStore().delView(router.currentRoute.value);
    router.go(-1)
}
const getBusinessList = () => {
    BusinessClass().then((res: any) => {
        if (res.data.code != 200) return ElMessage.error("查询课程失败");
        BusinessOption.value = res.data.data.map(item => ({
            value: Number(item.courseId),
            label: item.name
        }));
    });
}
const getClassList = () => {
    BusinessCourse().then((res: any) => {
        if (res.data.code != 200) return ElMessage.error("查询课程失败");
        courseIdOption.value = res.data.data.map(item => ({
            value: Number(item.courseId),
            label: item.name
        }));
    });
}
const getDetailList = () => {
    BusinessDetail(businessId).then(res => {
        DetailList.value = res.data.data
    })
}
onMounted(() => {
    getDetailList()
})
</script>

<style scoped lang="scss">
.bD {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .left {
        width: 80%;

        .one {
            width: 100%;
            margin-top: 10px;
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
            border: #ccc 1px solid;
            margin-bottom: 20px;

            .header {
                padding: 0 15px;
                padding-top: 10px;
                border-bottom: 1px solid #ccc;
            }

            .con {
                padding: 5px 10px;
                display: flex;

                .item {
                    width: 33%;

                    h4 {
                        font-style: italic;
                        font-weight: 600;
                    }


                }

                .item_last {
                    width: 100%;

                    h4 {
                        font-style: italic;
                        font-weight: 600;
                    }
                }
            }
        }

        .footer {
            width: 100%;
            height: 50px;
            margin-top: 10px;
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
            border: #ccc 1px solid;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: end;

            .el-button {
                margin-right: 10px;
            }
        }
    }

    .right {
        margin-top: 10px;
        width: 18%;
        height: 50px;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
        border: #ccc 1px solid;

        .header {
            padding: 0 15px;
            padding-top: 10px;
            border-bottom: 1px solid #ccc;
        }
    }
}
</style>